<template>
    <div id="root">
        <div class="login">
            <div class="login-head">
                <div class="login-head-logo"></div>
            </div>
            <div class="login-container">
                <div class="login-content">
                    <div class="login-content-title"><h2>欢迎注册百度商业产品用户!</h2>
                        <p class="login-content-remark">请务必填写真实信息，如有问题请阅读<a
                                href="http://yingxiao.baidu.com/new/home/help?ly=nav_list" target="_blank">帮助中心</a>解答
                        </p></div>
                    <div class="form-content">
                        <el-form ref="form" label-position="right" :model="form" :rules="rulesUnit" label-suffix="："
                                 label-width="100px">

                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="form.username" placeholder="用户名" :maxlength="11"></el-input>
                                <template #error>
                                    <div v-if="formErrors.username" class="form-error-tooltip">{{ formErrors.username }}</div>
                                </template>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="form.password" placeholder="密码" type="password"
                                          :maxlength="50">

                                </el-input>
                                <template #error>
                                    <div v-if="formErrors.password" class="form-error-tooltip">{{ formErrors.password }}</div>
                                </template>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="repeat">
                                <el-input v-model="form.repeat" placeholder="输入确认密码" type="password"
                                          :maxlength="50">
                                </el-input>
                                <template #error>
                                    <div v-if="formErrors.repeat" class="form-error-tooltip">{{ formErrors.repeat }}</div>
                                </template>
                            </el-form-item>
                            <el-form-item label="手机号码" prop="phonenumber">
                                <el-input v-model="form.phonenumber" placeholder="手机号码"
                                          :maxlength="11">
                                </el-input>
                                <template #error>
                                    <div v-if="formErrors.phonenumber" class="form-error-tooltip">{{ formErrors.phonenumber }}</div>
                                </template>
                            </el-form-item>
                            <el-form-item label="短信验证" prop="validCode" class="form_validCode">
                                <div class="form_compact">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-input v-model="form.validCode" placeholder="输入验证码"  :disabled="verificationCodeText == '获取验证码'"
                                                      :maxlength="6">

                                            </el-input>

                                        </el-col>
                                        <el-col :span="9">
                                            <el-button style="margin-left: 5%" type="primary"
                                                       :disabled="verificationCodeText !== '获取验证码'"
                                                       @click="queryVerificationCode">
                                                {{verificationCodeText}}
                                            </el-button>
                                        </el-col>
                                    </el-row>

                                </div>

                            </el-form-item>

                        </el-form>


                        <div class="login-content-action" style="display: flex">
                            <label
                                    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span
                                    class="ant-checkbox ant-checkbox-checked"><input type="checkbox"
                                                                                     class="ant-checkbox-input" value=""
                                                                                     checked=""><span
                                    class="ant-checkbox-inner"></span></span></label>
                            <p style="margin: 0 0 0 8px;color: #999;font-size: 12px; line-height: 21px;word-break: break-all;">我已阅读声明并接受<a href="https://u.baidu.com/ucweb/rules.html" target="_blank">百度商业产品注册协议</a>、<a
                                    href="http://e.baidu.com/accept.html" target="_blank">百度推广服务合同</a>与<a
                                    href="http://privacy.baidu.com/policy" target="_blank">百度隐私权保护声明</a></p></div>
                        <div class="action-btn">
                            <el-button type="primary" @click="validateForm">
                                注 册
                            </el-button>
                            <!--                            <el-button type="text" @click="toLogin" style="color:white">注 册</el-button>-->
                        </div>
                    </div>
                </div>
            </div>
            <footer class="cpu-footer cpu-footer-simple">
                <div class="cpu-footer-copyright">©2024 Baidu <a target="_blank" href="https://www.baidu.com/duty">使用百度前必读</a>
                    <a target="_blank"
                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
                    互联网信息服务许可 我已阅读并接受<a target="_blank" href="http://e.baidu.com/accept.html">百度推广服务合同</a> 欢迎访问<a
                            target="_blank" href="http://rules.baidu.com/userpolicy">百度推广政策中心</a></div>
            </footer>

        </div>
    </div>
</template>

<script>
    import {useRegister} from '@/services/model/user'

    import {CHECK_PASSWORD, CHECK_REPEAT, CHECK_PHONE} from "./validator";
    // 用户信息缓存
    const USER_INFO = 'userInfo'
    // 用户当前的操作步骤
    const USER_ACTIVE_STEP = 'userActiveStep'
    export default {
        data() {
            return {
                // 获取验证码文案
                verificationCodeText: '获取验证码',
                // 单位信息表单 校验规则
                formErrors:{username:'',phonenumber:'',validCode:'',password:'',repeat:''},

                rulesUnit: {
                    username: {required: true, message: '请输入用户名'},
                    phonenumber: {required: true, validator: CHECK_PHONE},
                    validCode: {required: true, message: '请输入验证码'},
                    password: {required: true, validator: CHECK_PASSWORD},
                    repeat: {required: true, validator: CHECK_REPEAT.bind(this)}
                },


                // 用户提交数据表单
                form: sessionStorage.getItem(USER_INFO) ? JSON.parse(sessionStorage.getItem(USER_INFO)) : {},
                // 接口是否正在加载
                isLoading: false
            }
        },
        methods: {
            clearFormErrors() {
                for (let field in this.formErrors) {
                    this.formErrors[field] = '';
                }
            },
            // 获取验证码
            async queryVerificationCode() {
                this.verificationCodeText = 60

                // 倒计时
                let timer = () => {
                    setTimeout(() => {
                        this.verificationCodeText--
                        if (this.verificationCodeText > 0) timer()
                        else this.verificationCodeText = '获取验证码'
                    }, 1000)
                }
                timer()
            },
            // 表单提交
            async submitForm() {
                this.isLoading = true
                try {
                    await useRegister(this.form)
                    this.isLoading = false
                    // this.form = {}
                    this.$confirm('注册成功', '提示', {
                        confirmButtonText: '去登录',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        this.toLogin()
                    })
                } catch (error) {
                    this.isLoading = false
                }
            },
            toLogin() {

                // 清楚缓存信息
                sessionStorage.removeItem(USER_INFO)
                // 清楚记录的步骤条
                sessionStorage.removeItem(USER_ACTIVE_STEP)
                this.$router.push('/login')
            },
            validateForm() {
                this.$refs['form'].validate((valid, fields) => {
                    if (!valid) {
                        // 遍历fields对象，更新formErrors
                        for (let field in fields) {
                            if (fields[field]) {
                                this.formErrors[field] = fields[field][0].message;
                            }
                        }
                    } else {
                        this.submitForm()
                        // 处理表单提交...
                    }
                });
            },
            // 表单校验
        },
    }
</script>

<style scoped lang="less">
    ::v-deep .el-form-item__error {
        display: none; /* 隐藏默认的错误提示 */
    }

   .form-content/deep/.form-error-tooltip {
        position: absolute;
        color: #e64552;
        padding: 5px 10px;
        font-size: 12px;
        white-space: nowrap;
        left: 320px; /* Adjust this value based on your layout */
        top: 50%;
        display: block;
        transform: translateY(-50%);
        z-index: 10; /* Ensure it's above other elements */
    }
   .form_validCode/deep/.form-error-tooltip {

       left: 320px; /* Adjust this value based on your layout */

   }
    .login {
        position: relative;
        color: rgba(0, 0, 0, .65);
        font-variant: tabular-nums;
        font-feature-settings: "tnum", "tnum";
        font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft YaHei, sans-serif;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        box-sizing: inherit;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #fff;


        .login-head {
            width: 100%;
            height: 64px;
            background-color: #fff;
            max-width: 70%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            display: flex;
            align-items: center;

            .login-head-logo {
                width: 93px;
                height: 28px;
                background: url('https://u.baidu.com/ucwebNew/static/resource/images/img-logo.068355aa.png');
                background-size: 93px 28px;
            }
        }

        .action-btn {
            margin-top: 3%;
            /deep/ .el-button--primary {
                width:41%;
            }

        }

        .login-container {
            position: relative;
            min-height: calc(100vh - 128px);
            border-top: 1px solid #dbdbdb;

            a {
                color: #3d88f2;
            }

            .login-content {
                width: 100%;

                max-width: 70%;
                width: 100%;
                background-color: #fff;
                margin-left: auto;
                margin-right: auto;

                .login-content-title {
                    margin: 35px 0;

                    h2 {
                        margin-bottom: 10px;
                        font-size: 18px;
                        line-height: 18px;
                        color: #000;
                    }

                    p.login-content-remark {
                        display: block;
                        font-size: 14px;
                        line-height: 21px;
                        color: #999;
                    }
                }

                .form-content {
                    /deep/ .el-form-item__label {
                        text-align: left !important;
                    }

                    /deep/ .el-input__inner {
                        width: 316px
                    }
                    /deep/.el-button--primary.is-disabled{
                        width: 110px;
                    }
                }

            }
        }

        .cpu-footer-simple {
            background-color: transparent;
            font-size: 12px;
        }
    }
</style>
<style lang="less" scoped>
    .el-button.el-button--medium {
        margin-top: 20px;
        padding: 10px 16px;
        border-radius: 8px;
        height: 36px;
        min-width: 36px;
        font-weight: 600;
        width: 55%;
        font-size: 17px;
        color: black;
    }

    .el-button--text {
        color: #4caf50;
    }

    h6 {
        text-align: center;
        font-size: 25px;
        font-weight: 600;
        color: #2b73af;
        padding: 20px;

    }

    .register {
        position: relative;
        height: 100%;

        .header {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 60px;
            background-color: #0d2234 !important;

            .header_box {
                height: 100%;
                margin: 0 auto;
                padding-right: 20px;

                h6 {
                    text-align: center;
                    font-size: 25px;
                    font-weight: 600;
                    color: #5dfff6;
                    padding: 20px;

                }

                p {
                    color: #00b3c0;
                }

                img {
                    width: 200px;
                }
            }
        }

        .box {
            text-align: -webkit-center;
            position: relative;
            top: 20%;
            margin: 0 auto;
            width: 660px;
            min-height: 400px;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 5px 3px #00b3c0;
            border-radius: 8px;
            padding-bottom: 20px;
            animation: fade_bottom 1.5s;
            @keyframes fade_bottom {
                from {
                    transform: translateY(30px);
                    opacity: 0.2;
                }
                to {
                    transform: translateY(0px);
                    opacity: 0.9;
                }
            }

            .box_wrap {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            & > h6 {
                text-align: center;
                font-size: 25px;
                font-weight: 600;
                color: white;
                padding: 20px;
                background-color: #2b73af;
            }

            /deep/ .register_step {
                width: 800px;
                padding: 10px 3%;

                .is-simple:not(:last-of-type) .el-step__title {
                    max-width: none;
                }

                .el-step__title.is-wait {
                    color: #999;
                }

                .el-step__head.is-finish .el-step__icon {
                    border-width: 8px;
                }
            }

            .el-form {
                margin-left: -70px;
                margin-top: 30px;
                width: 400px;
            }
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .fade-leave-to
        /* .list-leave-active for below version 2.1.8 */ {
        transform: translateX(-30px);
    }

    .tip {
        font-size: 15px;
        color: #999;
        margin-left: 25px;
        margin-bottom: 20px;

        p {
            line-height: 26px;
        }
    }

    .service_check {
        .el-checkbox {
            margin-right: 10px;
        }

        .service_router {
            color: royalblue;
        }

        .el-button--text {
            color: #228af5;
        }
    }

    .form_compact {
        /deep/ .el-input__inner {
            width: 100% !important;
        }

        width: 50%;
        overflow: hidden;
        align-items: center;
        justify-content: flex-start;

        & /deep/ .el-input input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        & /deep/ .el-button {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            margin-left: 1%;
        }
    }

</style>